<template>
  <ui-toolbar class="ui-grid-global-toolbar" :bind-close="false">
    <ui-toolbar-item
      v-for="(item, index) in innerItems"
      :key="index"
    >
      <template v-if="item.render">
        <component :is="item"></component>
      </template>
      <template v-else>
        <ui-button
          :type="item.type"
          :click="item.click"
          :icon="item.icon"
          @click.stop
        >{{ item.label }}</ui-button>
      </template>
    </ui-toolbar-item>
  </ui-toolbar>
</template>
<script>
export default {
  name: 'UiGlobalToolbar',
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    innerItems() {
      return (this.items || []).filter(v => {
        if (typeof v.visible === 'function') {
          return v.visible() !== false
        } else {
          return v.visible !== false
        }
      })
    }
  }
}
</script>
